<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
     <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
      <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<fmt:setBundle basename="Messages" />
<title><fmt:message key="Display.MakeBooking" /></title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
  
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script>
    $(function() {
        var minDates=$( "#datepicker" ).datepicker({minDate: '0'});
        $( "#datepickers" ).datepicker({minDate: '0'});
    });
    
    </script>
<script type="text/javascript"
	src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<style type="text/css">
* {
	font-family: Verdana;
	font-size: 96%;
}

label {
	width: 10em;
	float: left;
}

label.error {
	float: none;
	color: red;
	padding-left: .5em;
	vertical-align: top;
}

p {
	clear: both;
}

.submit {
	margin-left: 12em;
}

em {
	font-weight: bold;
	padding-right: 1em;
	vertical-align: top;
}
</style>
  <script>
	$(document).ready(function() {
		$("#commentForm").validate();
	});
</script> 
</head>
<body>

<img src="img/logo_ISS.jpg" class="logo" />
	<div class="header">
		<div style="float: left; margin: 11px auto 0 auto">
			<h1>
				<fmt:message key="Display.InstituteofSystemScience" />
			</h1>
		</div>
		<div style="float: right; margin: 11px auto 0 auto">
			<h1>
				<fmt:message key="Display.FacilitiesBookingSystem" />
			</h1>
		</div>
	</div>
	<div class="site_content">
		<div class="sidebar_container">
			<div class="sidebar">
<c:choose>
					<c:when test="${sessionScope.Role=='Manager'}">
							<%@include file="managerSideMenu.jsp" %>
					</c:when>
					<c:when test="${sessionScope.Role=='Staff'}">
						
						<%@include file="staffSideMenu.jsp" %>
					</c:when>
				</c:choose>
			</div>
		</div>

		<div class="content">
<form action="ManageBookingServlet" method="post" class="cmxform" id="commentForm">
${result}
<table border="0" cellspacing="5" cellpadding="5" style="background:#FFF">
	<tr>
		<td>
			<fmt:message key="Display.FacilityType" />
		</td>
		<td>
			<select name="facilityTypes">
				<c:forEach var="facilityType" items="${fType}"> 
				<option value=${facilityType }>${facilityType }</option>
				</c:forEach>
			</select>
		</td>
		<td></td>
			<td></td>
	</tr>
	<tr>
		<td>
			<fmt:message key="Display.FacilityName"/>
		</td>
		<td>
			 <select name="facilityName">
				<c:forEach var="facilities" items="${facility}"> 
				<option value=${facilities }>${facilities }</option>
				</c:forEach>
			</select>
		</td>
		<td></td>
			<td></td>
	</tr>
	<tr>
		<td>
			<fmt:message key="Display.FromDate"/>
		</td>
		<td>
			 <input type="text" id="datepicker" name="datepicks"  class="required"/>
		</td>
		<td>
				<fmt:message key="Display.ToDate"/>
		</td>
		<td>
			 <input type="text" id="datepickers" name="datepick" class="required"/>
		</td>
	</tr>
	<tr>
		<td>
				<fmt:message key="Display.Priority"/>
		</td>
		<td>
		
 			<select name="priorities"> 
				 <c:forEach var="prioritys" items="${Priority}" varStatus="stat">
 				<option value="${stat.index+1}">${prioritys}</option>
				</c:forEach>
			</select>
		</td>
			<td></td>
		<td></td>
	</tr>
	<tr>
		<td>
				<fmt:message key="Display.Reason"/>
		</td>
		<td>
			<textarea name="reason" id="reason" class="required"></textarea>
		</td>
		<td></td>
			<td></td>
	</tr>
	<tr>
		<td></td>
		<td>
			<input type="reset" value=<fmt:message key="Display.Reset"/> class="ButtonStyle" />
		</td>
		<td>
			<input type="submit" value=<fmt:message key="Display.Book"/> class="ButtonStyle" />
		</td>
			<td></td>
	</tr>
	
</table>
</form>
</div>

	</div>

	<div class="footer" style="align: center">Copyright@ Team3
		Erudites</div>
</body>
</html>